<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="开始日期" style="width: 308px">
        <el-date-picker
          v-model="beginTime"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="开始日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期" style="width: 308px">
        <el-date-picker
            v-model="endTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="flushAvgDensity"
          v-hasPermi="['coal:rowData:flush']"
        >计算平均密度</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row>
      <el-col :span="24" class="card-box">
        <span style="font-size: 28px;font-weight: bold;text-align: center">{{ '当前平均密度：' + avgDensity}}</span>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="rowDataList" @selection-change="handleSelectionChange">
      <el-table-column label="日期" align="center" prop="beginTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="beginTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.beginTime, '{h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.endTime, '{h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="体积" align="center" prop="volume" width="150">
        <template #default="scope">
          <span>{{ scope.row.volume + ' m³'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="煤种" align="center" prop="coalKind" width="130">
        <template #default="scope">
          <el-select v-model="dataRowMap[scope.row.id+'_coalKind']" placeholder="选择煤种" clearable>
            <el-option label="混煤" value="1"/>
            <el-option label="特低灰" value="2"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="重量" align="center" prop="weight">
        <template #default="scope">
          <el-input v-model="dataRowMap[scope.row.id+'_weight']" placeholder="输入重量" ><template #append>t</template></el-input>
        </template>
      </el-table-column>
      <el-table-column label="密度" align="center" prop="varchar">
        <template #default="scope">
          {{ densityIsEmpty(scope.row.density) }}
        </template>
      </el-table-column>
      <el-table-column label="水分" align="center" prop="moisture">
        <template #default="scope">
          <el-input v-model="dataRowMap[scope.row.id+'_moisture']" placeholder="输入水分" ><template #append>%</template></el-input>
        </template>
      </el-table-column>
      <el-table-column label="灰度" align="center" prop="grayscale">
        <template #default="scope">
          <el-input v-model="dataRowMap[scope.row.id+'_grayscale']" placeholder="输入灰度" ><template #append>%</template></el-input>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script setup name="RowData">
import { listRowData, uploadData, rowDataAvgDensity } from "@/api/coal/rowData";

const { proxy } = getCurrentInstance();

const rowDataList = ref([]);
const loading = ref(true);
const showSearch = ref(false);

const total = ref(0);
const beginTime = ref(null);
const endTime = ref(null);
const dataRowMap = ref({});
const avgDensity = ref('未计算');

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceId: null,
    deviceName: null,
    beginTime: null,
    endTime: null,
    volume: null,
    coalKind: null,
    weight: null,
    varchar: null,
    moisture: null,
    grayscale: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null,
    orderByColumn: 'id',
    isAsc: 'desc'
  },
  rules: {
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询每天每列统计列表 */
function getList() {
  loading.value = true;
  queryParams.value.params = {};
  if (null != beginTime.value && '' != beginTime.value) {
    queryParams.value.params["beginTime"] = beginTime.value;
  }
  if (null != endTime.value && '' != endTime.value) {
    queryParams.value.params["endTime"] = endTime.value;
  }

  listRowData(queryParams.value).then(response => {
    listToMap(response.rows)
    rowDataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
  getAvgDensity();
}

function getAvgDensity() {
  rowDataAvgDensity().then(response =>{
    avgDensity.value = densityIsEmpty(response.data);
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  beginTime.value = null;
  endTime.value = null;
  proxy.resetForm("queryRef");
  handleQuery();
}

function listToMap(list){
  list.forEach(e=>{
    dataRowMap.value[e.id + '_coalKind'] = e.coalKind
    dataRowMap.value[e.id + '_weight'] = e.weight
    dataRowMap.value[e.id + '_moisture'] = e.moisture
    dataRowMap.value[e.id + '_grayscale'] = e.grayscale
  })
}

function flushAvgDensity(){
  uploadData(dataRowMap.value).then(response =>{
    proxy.$modal.msgSuccess("计算成功");
    getList()
  })
}

getList();

function densityIsEmpty(data){
  if (data === '' || data === null || data === 'null' || data === undefined || data.length ===0){
    return '未计算'
  } else {
    if (typeof data === 'string'){
      return data + ' t/m³'
    }
    let content = '';
    data.forEach(e=>{
      if (e.coalKind === '1') {
        content = content + '混煤为' + e.density + ' t/m³，'
      }
      if (e.coalKind === '2') {
        content = content + '特低灰为' + e.density + ' t/m³'
      }
    })
    return content
  }
}
</script>
